<template>
  <el-checkbox-group v-model="selectedValues" @change="handleChange">
    <el-checkbox v-for="option in options" :key="option.value" :value="option.value">
      {{ option.label }}
    </el-checkbox>
  </el-checkbox-group>
</template>

<script setup>
import { ref, defineProps, defineEmits, watch } from 'vue'

const props = defineProps({
  multiple: {
    type: Boolean,
    default: false,
  },
  options: {
    type: Array,
    default: () => [],
  },
  modelValue: {
    type: Array,
    default: () => [],
  },
})

const emit = defineEmits(['update:modelValue'])

const selectedValues = ref(props.modelValue)

const handleChange = (value) => {
  if (props.multiple) {
    // 多选模式下
    selectedValues.value = value
  } else {
    // 单选模式下
    selectedValues.value = value.length ? [value[value.length - 1]] : []
  }
  emit('update:modelValue', selectedValues.value)
}

watch(() => props.modelValue, (newValue) => {
  selectedValues.value = [...newValue]
}, { deep: true })
</script>

<style scoped>
.el-checkbox-group {
  display: flex;
}
</style>